<form id="component-form-step-3" class="layui-form" action="" lay-filter="component-form-step-3">
    <table class="layui-table" lay-size="sm">
        <colgroup>
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>用户名称</th>
            <th>用户数据</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>用户名</td>
            <td>{$commParam['info']['username']}</td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td>{$commParam['info']['email']}</td>
        </tr>
        <tr>
            <td>昵称</td>
            <td>{$commParam['info']['nick_name']}</td>
        </tr>
        <tr>
            <td>真实姓名</td>
            <td>{$commParam['info']['real_name']}</td>
        </tr>
        <tr>
            <td>用户简介</td>
            <td>{$commParam['info']['remark']}</td>
        </tr>
        <tr>
            <td>权限预览</td>
            <td>
                <div style="height: 300px;overflow: auto;">
                    <table class="layui-table" lay-size="sm">
                        <thead>
                        <tr>
                            <th>节点名称</th>
                            <th>是否授权(YES/NO)</th>
                        </tr>
                        </thead>
                        <tbody>
                        {volist name="commParam.nodes" id="node1"}
                        <tr class="">
                            <td>{$node1['title']}</td>
                            <td id="node-{$node1['id']}" data-node-status>YES</td>
                        </tr>
                        {volist name="node1.children" id="node2"}
                        <tr class="">
                            <td>|---- {$node2['title']}</td>
                            <td id="node-{$node2['id']}" data-node-status>YES</td>
                        </tr>
                        {volist name="node2.children" id="node3"}
                        <tr class="">
                            <td>|------------ {$node3['title']}</td>
                            <td id="node-{$node3['id']}" data-node-status>YES</td>
                        </tr>
                        {/volist}
                        {/volist}
                        {/volist}
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</form>
<script>
    layui.use(['upload','form'], function(){
        var upload = layui.upload;
        var $ = layui.jquery;
        var form = layui.form;

        // 初始化一个VUE对象
        var add_step3 = new Vue({
            'el' : '#component-form-step-3',
            'data' : {

            },
            methods : {
                nodes : function () {
                    var self = this;
                    var result = [];
                    for(var k in commParam['roles']){
                        for(var kk in self.roles){
                            if(commParam['roles'][k]['id'] == self.roles[kk]){
                                for(var kkk in commParam['roles'][k]['nodes']){
                                    result.push(commParam['roles'][k]['nodes'][kkk]);
                                }
                                break;
                            }
                        }
                    }
                    return result;
                }
            },
            computed : {

            },
            watch : {

            }
        });

        var add_step3_init = function () {

            $('[data-node-status]').text('YES');

            var nodes = add_step3.nodes();
            for(var k in nodes){
                $('#node-'+nodes[k]).text('NO');
            }
        };

        (function (add_step3) {
            add_step3_init();
        })(add_step3);

        window.add_step3 = add_step3;
    });
</script>